<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title>Agora Web Sample</title>
<link rel="stylesheet" href="/static/css/app/workspace/conversation/bootstrap.min.css">
<!--<script src="build/AgoraRTC-development.js"></script>-->
<script src="/static/js/app/workspace/conversation/jquery.js"></script>
    <script src="/static/js/app/workspace/conversation/AgoraRTCSDK-2.3.1.js"></script>
</head>

<body>
<div id="div_device" class="panel panel-default" style="display:none">
<div class="select">
<label for="audioSource">音频源: </label><select id="audioSource"></select>
</div>
<div class="select">
<label for="videoSource">视频源: </label><select id="videoSource"></select>
</div>
</div>

<div id="div_join" class="panel panel-default">
<div class="panel-profile">
<h4>Profile</h4>
<select id = "profile">
<option value ="1">320x180@15fps@140k</option>
<option value ="2">640x360@30fps@400k</option>
<option value ="3">1280x720@24fps@1130k</option>
</select>
</div>
<div class="panel-body">
    <!--d8d208d16c78459bb8b91a6c3e7c33e6-->
    <!--aab8b8f5a8cd4469a63042fcfafe7063-->
Key: <input id="key" type="text" value="d8d208d16c78459bb8b91a6c3e7c33e6" size="36"></input>
Channel（频道）: <input id="channel" type="text" value="1000" size="4"></input>
Host（主机）: <input id="video" type="checkbox" checked></input>
<button id="join" class="btn btn-primary" onclick="join()">Join（进）</button>
<button id="leave" class="btn btn-primary" onclick="leave()">Leave（离开）</button>
<button id="publish" class="btn btn-primary" onclick="publish()">Publish（公布）</button>
<button id="unpublish" class="btn btn-primary" onclick="unpublish()">Unpublish</button>
<button id="enableAudio" class="btn btn-primary" onclick="enableAudio()">Enable Audio（启用音频）</button>
<button id="disableAudio" class="btn btn-primary" onclick="disableAudio()">Disable Audio</button>
<button id="enableVideo" class="btn btn-primary" onclick="enableVideo()">Enable Video（启用视频）</button>
<button id="disableVideo" class="btn btn-primary" onclick="disableVideo()">Disable Video</button>
</div>
</div>

    <!--style>
    .video__box{width:910px; margin:0 auto; overflow:hidden;}
    .video__main{ width:810px; height:607px;float:left }
    .video__list{ width:200px; height:607px; float:left;}
    .video__item{ width:200px; height:174px; hei background:url(/img/icon_live.png) center center no-repeat; }
    </style>
    <div class="video__main">
    </div>
    <div class="video__list">
        <div class="video__item"></div>
        <div id="video" class="video__item">
            <div id="agora_local"></div>
        </div>
    </div-->

<div id="video" style="margin:0 auto;">

    <div id="agora_local" style="float:right;width:210px;height:147px;display:inline-block;"></div>
</div>

<script language="javascript">

    if(AgoraRTC.checkSystemRequirements()) {
        alert("Web SDK 与当前使用的浏览器适配");
    }else{
        alert("Web SDK 与当前使用的浏览器不适配");
    }

var client, localStream, camera, microphone;
var audioSelect = document.querySelector('select#audioSource');//获取音频源
var videoSelect = document.querySelector('select#videoSource');//获取视频源

function join() {//进入频道
  document.getElementById("join").disabled = true;
  document.getElementById("video").disabled = true;
  var dynamic_key = null;
  // for dynamic key
  /*alert("Try to get dynamic key");
  var use_https = ('https:' == document.location.protocol ? true : false);
  if (use_https) {
    var url_str = "https://ip:port/dynamic_key?channelName=" + channel.value;
  } else {
    var url_str = "http://ip:port/dynamic_key?channelName=" + channel.value;
  }
  $.ajax({reateClient
    url: url_str,
    error: function() {
      alert("Failed to get dynamic key");
    },
    success: function(response) {
      alert(response.key);
      dynamic_key = response.key;*/
  alert("Init AgoraRTC client with vendor key（带有供应商密钥的Init AgoraRTC客户端）: " + key.value);
    //client = AgoraRTC.createClient({mode: 'interop'});
 // client = AgoraRTC.createClient({mode: 'h264_interop'});//创建音视频对象  mode:频道模式 //获取媒体失败
   // client = AgoraRTC.createClient({mode: 'rtc', codec: 'vp8'});////获取媒体失败

    client = AgoraRTC.createClient({mode: 'rtc'});
    client.init(key.value, function () {                  //初始化client对象
    alert("AgoraRTC 客户端初始化");
    var profile = document.getElementById("profile");//获取项目列表
    var index = profile.selectedIndex;
    var width = 640;
    var height = 360;
    var framerate = 30;
    var bitrate = 400;
    if (profile.options[index].value === "1") {
      alert("Select 1");
      width = 320;
      height = 180;
      framerate = 15;
      bitrate = 140;
    } else if (profile.options[index].value === "2") {
      alert("Select 2");
    } else if (profile.options[index].value === "3") {
      alert("Select 3");
      width = 1280;
      height = 720;
      framerate = 24;
      bitrate = 1130;
    }
    /*
    配置直播旁路推流
        width/height:设置旁路直播的输出码流的宽度/高度(360)
        framerate:设置旁路直播的输出码流的帧率(15fps)
        bitrate:设置旁路直播的输出码流的码率（500 Kbps）
        publisherUrl:设置合图的推流地址 （null）
     */
    client.configPublisher({width: width, height: height, framerate: framerate, bitrate: bitrate, defaultLayout: 1, publishUrl: "rtmp://vid-130451.pull.fastweb.broadcastapp.agoraio.cn/live/" + channel.value});
    //加入频道
    client.join(dynamic_key, channel.value, null, function(uid) {
        alert("用户 " + uid + " 加入频道成功！");
      if (document.getElementById("video").checked) {
        camera = videoSource.value;
        microphone = audioSource.value;
        //创建本地流（创建音视频流对象）
        localStream = AgoraRTC.createStream({streamID: uid, audio: true, cameraId: camera, microphoneId: microphone, video: document.getElementById("video").checked, screen: false});
        if (document.getElementById("video").checked) {
          localStream.setVideoProfile('720p_3');
        }
        //初始化本地流（初始化音频对象）
        localStream.init(function() {
            alert("成功获取媒体");
          // 播放音视频流
          localStream.play('agora_local');
          //发布本地流
          client.publish(localStream, function (err) {
            alert("发布本地流错误: " + err);
          });
          //监听流事件(本地音视频已发布回调事件 )
          client.on('stream-published', function (evt) {
            alert("成功发布本地流");
          });
        }, function (err) {
          alert("获取媒体失败", err);
        });
      }
    }, function(err) {
      alert("加入频道失败", err);
    });
  }, function (err) {
    alert("AgORARTC客户端初始化失败", err);
  });
  channelKey = "";
  client.on('error', function(err) {
    alert("获取错误信息:", err.reason);
    if (err.reason === 'DYNAMIC_KEY_TIMEOUT') {
      client.renewChannelKey(channelKey, function(){
        alert("成功更新信道密钥 ");
      }, function(err){
        alert("更新信道密钥失败: ", err);
      });
    }
  });

//远程音视频流已添加回调事件
  client.on('stream-added', function (evt) {
    var stream = evt.stream;
    alert("New stream added: " + stream.getId());
    alert("Subscribe ", stream);
    client.subscribe(stream, function (err) {
      alert("Subscribe stream failed", err);
    });
  });
//远程音视频流已订阅回调事件
  client.on('stream-subscribed', function (evt) {
    var stream = evt.stream;
    alert("Subscribe remote stream successfully: " + stream.getId());
    if ($('div#video #agora_remote'+stream.getId()).length === 0) {
      $('div#video').append('<div id="agora_remote'+stream.getId()+'" style="float:left; width:810px;height:607px;display:inline-block;"></div>');
    }
    stream.play('agora_remote' + stream.getId());
  });
//远程音视频流已删除回调事件
  client.on('stream-removed', function (evt) {
    var stream = evt.stream;
    stream.stop();
    $('#agora_remote' + stream.getId()).remove();
    alert("Remote stream is removed " + stream.getId());
  });
//对方用户已离开会议室回调事件 (peer-leave)
  client.on('peer-leave', function (evt) {
    var stream = evt.stream;
    if (stream) {
      stream.stop();
      $('#agora_remote' + stream.getId()).remove();
      alert(evt.uid + " leaved from this channel");
    }
  });
  // for dynamic key
  /*}
  });*/
}

function leave() {
  document.getElementById("leave").disabled = true;
  client.leave(function () {
    alert("离开频道成功");
  }, function (err) {
    alert("离开频道失败");
  });
}

function publish() {
  document.getElementById("publish").disabled = true;
  document.getElementById("unpublish").disabled = false;
  client.publish(localStream, function (err) {
    alert("发布本地流错误 : " + err);
  });
}

function unpublish() {
  document.getElementById("publish").disabled = false;
  document.getElementById("unpublish").disabled = true;
  client.unpublish(localStream, function (err) {
    alert("未发布本地流失败" + err);
  });
}
//启用视频
function enableAudio() {
  //document.getElementById("disableAudio").disabled = true;
  //document.getElementById("enableAudio").disabled = false;
  alert("启用视频");
  localStream.enableAudio();
}

function disableAudio() {
  //document.getElementById("disableAudio").disabled = false;
  //document.getElementById("enableAudio").disabled = true;
  localStream.disableAudio();
}

function enableVideo() {
  //document.getElementById("disableVideo").disabled = true;
  //document.getElementById("enableVideo").disabled = false;
  localStream.enableVideo();
}

function disableVideo() {
  //document.getElementById("disableVideo").disabled = false;
  //document.getElementById("enableVideo").disabled = true;
  localStream.disableVideo();
}

function getDevices() {
  AgoraRTC.getDevices(function (devices) {
    for (var i = 0; i !== devices.length; ++i) {
      var device = devices[i];
      var option = document.createElement('option');
      option.value = device.deviceId;
      if (device.kind === 'audioinput') {
        option.text = device.label || 'microphone ' + (audioSelect.length + 1);
        audioSelect.appendChild(option);
      } else if (device.kind === 'videoinput') {
        option.text = device.label || 'camera ' + (videoSelect.length + 1);
        videoSelect.appendChild(option);
      } else {
        alert('其他种类的源/器件 : ', device);
      }
    }
  });
}
//audioSelect.onchange = getDevices;
//videoSelect.onchange = getDevices;
//getDevices();
</script>
</body>
</html>
